<template>
  <view class="footprint">
    <!--日历控件-->
    <rf-calendar
        class="date"
        :insert="true"
        :lunar="true"
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="handleDateChange"
    />
    <!--足迹列表-->
    <rf-swipe-action>
      <rf-swipe-action-item
          :options="options"
          :info="item"
          @action="bindClick"
          class="uni-list-cell"
          :key="index"
          v-for="(item, index) in footPrintList">
        <view class="uni-media-list" @tap="navTo(`/pages/product/product?id=${item.product.id}`)">
          <image class="uni-media-list-logo"
                 mode="aspectFill"
                 @error="onImageError(index)"
                 :src="item.product && item.product.picture"></image>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{ item.product && item.product.name }}</view>
            <view class="uni-media-list-text-bottom">
              <text class="price">{{ item.product && item.product.minPriceSku.price }}</text>
              <text>{{ item.created_at | time }}</text>
            </view>
          </view>
        </view>
      </rf-swipe-action-item>
    </rf-swipe-action>
    <!--足迹列表为0-->
    <view v-if="footPrintList.length === 0" class="empty">
      <image class="empty-content-image" :src="empty" mode="aspectFit"></image>
      <text class="empty-content-text">这一天没有足迹哦</text>
    </view>
    <rf-load-more v-else :status="loadingType"/>
  </view>
</template>

<script>
    /**
     * @des 我的足迹
     *
     * @author stav stavyan@qq.com
     * @date 2019-11-22 10:47
     * @copyright 2019
     */
    import {footPrintDel, footPrintList} from "@/api/userInfo";
    import rfLoadMore from '@/components/rf-load-more/rf-load-more';
    import errorImg from '@/static/errorImage.jpg';
    import rfCalendar from "@/components/rf-calendar/rf-calendar";
    import rfSwipeAction from '@/components/rf-swipe-action/rf-swipe-action';
    import rfSwipeActionItem from '@/components/rf-swipe-action-item/rf-swipe-action-item';
    import moment from '@/utils/moment';

    export default {
        components: {
            rfLoadMore,
            rfCalendar,
            rfSwipeAction,
            rfSwipeActionItem
        },
        data() {
            return {
                footPrintList: [],
                errorImg: errorImg,
                page: 1,
                loadingType: 'more',
                token: null,
                startTime: moment().startOf('day').format('X'),
                endTime: moment().endOf('day').format('X'),
                options: [
                    {text: '删除', style: {backgroundColor: '#fa436a'}}
                ],
                empty: ''
            };
        },
        filters: {
            // 时间格式化
            time(val) {
                return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        onLoad() {
            this.initData();
        },
        methods: {
            // 监听日期变化
            async handleDateChange(e) {
                this.page = 1;
                this.footPrintList = [];
                if (parseInt(e.type) !== 0) {
                    this.startTime = await moment(`${e.year}-${e.month}-${e.date} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                    this.endTime = await moment(`${e.year}-${e.month}-${e.date + 1} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                } else {
                    this.startTime = undefined;
                    this.startTime = undefined;
                }
                this.getFootPrintList();
            },
            // 删除足迹
            async bindClick(e) {
                uni.showLoading({title: '删除足迹中...'});
                await this.$del(`${footPrintDel}?id=${e.data.id}`, {
                    page: this.page
                }).then(() => {
                    this.$api.msg('删除足迹成功');
                    this.page = 1;
                    this.footPrintList.length = 0;
                    this.getFootPrintList();
                });
            },
            // 数据初始化
            initData() {
                this.token = uni.getStorageSync('accessToken') || undefined;
                if (this.token) {
                    this.getFootPrintList();
                }
            },
            // 获取我的足迹列表
            async getFootPrintList() {
                uni.showLoading({title: '加载中...'});
                const params = {};
                params.page = this.page;
                if (this.startTime && this.endTime) {
                    params.start_time = this.startTime,
                        params.end_time = this.endTime
                }
                await this.$get(`${footPrintList}`, {
                    ...params
                }).then(r => {
                    this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
                    this.footPrintList = [...this.footPrintList, ...r.data];
                })
            },
            // 图片异常处理
            onImageError(index) {
                this.footPrintList[index].product.picture = this.errorImg;
            },
            // 跳转至商品详情
            navTo(url) {
                uni.navigateTo({
                    url
                })
            },
        }
    }
</script>

<style lang='scss' scoped>
.footprint {
	background: $page-color-base;
	height: 100vh;
	.uni-list-cell {
		margin: 10upx 0;
	}
	.empty {
		text-align: center;
		margin-top: 120upx;
		.empty-content-image {
			width: 200upx;
			height: 200upx;
		}
		.empty-content-text {
			display: block;
			font-size: $font-color-light;
		}
	}
}
.uni-list {
	/*margin-top: 20upx;*/
}
.uni-media-list-logo {
	width: 240upx;
	height: 180upx;
}
.uni-media-list-body {
	height: auto;
	justify-content: space-around;
}
.uni-media-list-text-top {
	height: 74upx;
	font-size: 28upx;
	overflow: hidden;
}
.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.price{
	font-size: $font-base;
	color: $font-color-dark;
	&:before{
		content: '￥';
		font-size: $font-sm;
		margin: 0 2upx 0 8upx;
	}
}
</style>
